import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

import "./UI/Pages"
import "./UI/Components/FontAwesome"

ApplicationWindow {
    width: 1200
    height: 600
    id: window
    title: "فىلىم خەت بىرىكتۈرگۈچ"
    visible: true
    color: "#333333"

    property var pages: [
        {icon: "\uf369", page: "UI/Pages/VideoPage.qml"},
        {icon: "\uf36b", page: "UI/Pages/AboutPage.qml"}
    ]
    property int selectedPageIndex: 0

    RowLayout {
        anchors.fill: parent
        layoutDirection: Qt.RightToLeft
        spacing: 0
        Rectangle {
            width: 60
            implicitHeight: window.height
            color: Qt.alpha("black", 0.2)
            ColumnLayout {
                anchors.fill: parent
                ListView {
                    id: listView
                    Layout.fillHeight: true
                    implicitWidth: parent.parent.width
                    model: window.pages
                    spacing:  10
                    anchors.margins: 5
                    delegate: Rectangle {
                        id: item
                        required property int index
                        required property var modelData
                        property bool isSelected: index == window.selectedPageIndex
                        width: listView.width
                        height: listView.width
                        radius: listView.width / 2
                        color: "transparent"
    //                    color: isSelected ? "red" : "green"
                        FAIcon {
                            icon: parent.modelData.icon
                            anchors.centerIn: parent
                            color: Qt.alpha("white", item.isSelected ? 0.8 : 0.3)
                            style: 0
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                window.selectedPageIndex = item.index
                            }
                        }
                    }
                }
                FAIcon {
                    width: parent.parent.width
                    height: parent.parent.width
                    icon: "\uf013"
                    color: "green"
                    style: 2
                }
            }
        }
        SwipeView {
            id: swipeView
            implicitHeight: window.height
            Layout.fillWidth: true
            currentIndex: window.selectedPageIndex
            clip: true
            orientation: Qt.Vertical
            interactive: false
            Repeater {
                model: window.pages
                Loader {
                    required property var modelData
                    id: loader
                    source: modelData.page
                }
            }
        }
    }
}
